<template>
  <div class="c_index-news">
		<div class="c_index-title">- 热门菜谱 -</div>
		<div class="c_recipe">
			<div class="c_recipe-img">
				<div class="c_first_part">
					<a class="c_one_row" href="">
						<img class="c_first_img1" src="../../public/img/recipe/rec1.jpg" alt="">
						<div class="c_caipu_title1">梅菜扣肉</div>
						<div class="c_video_tag">
							<img class="c_video_logo" src="../../public/img/recipe/mobile_video.png" alt="">
							124.8w
						</div>
					</a>
					<a class="c_two_row" href="">
						<img class="c_first_img2" src="../../public/img/recipe/rec2.jpg" alt="">
						<div class="c_caipu_title">清炖鱼</div>
						<div class="c_video_tag">
							<img class="c_video_logo" src="../../public/img/recipe/mobile_video.png" alt="">
							100.1w
						</div>
					</a>
					<a class="c_third_row" href="">
						<img class="c_first_img3" src="../../public/img/recipe/rec3.jpg" alt="">
						<div class="c_caipu_title">香煎黄花鱼</div>
						<div class="c_video_tag">
							<img class="c_video_logo" src="../../public/img/recipe/mobile_video.png" alt="">
							99.8w
						</div>
					</a>
				</div>
				<div class="c_second_part">
					<div class="c_left">
						<a class="c_left_one" href="">
							<img class="c_second_img1" src="../../public/img/recipe/rec4.jpg" alt="">
							<div class="c_caipu_title">凉拌海带丝</div>
							<div class="c_video_tag">
							<img class="c_video_logo" src="../../public/img/recipe/mobile_video.png" alt="">
							154.8w
						</div>
						</a>
						<a class="c_left_two" href="">
							<img class="c_second_img2" src="../../public/img/recipe/rec5.jpg" alt="">
							<div class="c_caipu_title">洋葱炒鸡蛋</div>
							<div class="c_video_tag">
							<img class="c_video_logo" src="../../public/img/recipe/mobile_video.png" alt="">
							80.05w
						</div>
						</a>
						<a class="c_left_two" href="">
							<img class="c_second_img3" src="../../public/img/recipe/rec6.jpg" alt="">
							<div class="c_caipu_title">黄金大薯条</div>
							<div class="c_video_tag">
							<img class="c_video_logo" src="../../public/img/recipe/mobile_video.png" alt="">
							122.1w
						</div>
						</a>
					</div>	
					<div class="c_right">
						<a href="">
							<img class="c_second_img3" src="../../public/img/recipe/rec7.jpg" alt="">
						<div class="c_caipu_title_2">经典红烧肉</div>
						<div class="c_video_tag">
							<img class="c_video_logo" src="../../public/img/recipe/mobile_video.png" alt="">
							200.8w
						</div>
						</a>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>


<script>
export default {
	
}
</script>


<style scoped>
.c_index-news{
	font-size:.45rem;
	height:480px;
	padding: 20px;
	background-color: #fff
}
.c_recipe-img{
	height: 390px;
}
.c_index-title{
	font-size: 18px;
	font-weight: bold;
	text-align:center;
	padding-bottom: 7px;
	margin-bottom: 17px;
	border-bottom: #eee 1px solid;
}

.c_first_part{
	height: 95px;
	position: relative;
	float: left;
}
.c_one_row{
	position: relative;
	float: left;
	width: 42%;
	height: 94.45px;
	margin-right: 1%;
	font-size: 16px;
}
.c_two_row{
	position: relative;
	float: left;
	width: 28%;
	height: 94.45px;
	margin-right: 1%;
	font-size: 14px;
}
.c_third_row{
	position: relative;
	float: left;
	width: 28%;
	height: 94.45px;
	font-size: 14px;
}
.c_first_img1,.c_first_img2,.c_first_img3,.c_second_img1,.c_second_img2,.c_second_img3{
	width: 100%;
	height: 100%
}
.c_caipu_title,.c_caipu_title1,.c_caipu_title_2{
	color:#fff;
	width:100%;
	background-color: rgba(0,0,0,.2);
	position: absolute;
	text-align: center;
	bottom:40%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: bold
}
.c_caipu_title1{
	height: 20px;
	line-height: 20px;
}
.c_caipu_title_2{
	font-size:20px;
	height:40px;
	line-height: 40px;
	bottom: 45%
}.c_second_part,.c_recipe{
	display: flex;
	float: left;
}
.c_left{
	margin-top: 1%;
	width: 42%;
	height: 100%;
	margin-right: 1%;
}
.c_left_one{
	position: relative;
	float: left;
	height: 98px;
	font-size: 16px;
}
.c_left_two{
	position: relative;
	float: left;
	margin-top: 3%;
	height: 98px;
	font-size: 16px;
}
.c_right{
	position: relative;
	margin-top:1%;
	width: 57%;
}
.c_video_tag{
	color:#fff;
	position: absolute;
	bottom:0;
	font-size:8px;
}
.c_video_logo{
	width:18px;
}
</style>
